<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学成网</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
    <nav>
        <!--logo 部分-->
        <div class="logo">
            <img src="images/logo-s.png"/>

        </div>
        <div class="navbar">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="person">
            <span>个人中心</span>
            <img src="images/tou_03.png" alt="">
        </div>
        <div class="search">
            <input type="text"/>
            <input class="icon_submit" type="submit" value="">
        </div>
    </nav>
</header>
<div id="banner" class="container clearfix">

    <div id="slide">
        <ul>
            <li><a href="#">课程111 <span class="arrow-right">></span></a></li>
            <li><a href="#">课程111 <span class="arrow-right">></span></a></li>
            <li><a href="#">课程111 <span class="arrow-right">></span></a></li>
            <li><a href="#">课程111 <span class="arrow-right">></span></a></li>
            <li><a href="#">课程111 <span class="arrow-right">></span></a></li>
            <li><a href="#">课程111 <span class="arrow-right">></span></a></li>
            <li><a href="#">课程111 <span class="arrow-right">></span></a></li>
            <li><a href="#">课程111 <span class="arrow-right">></span></a></li>
            <li><a href="#">课程111 <span class="arrow-right">></span></a></li>
            <li><a href="#">课程111 <span class="arrow-right">></span></a></li>
        </ul>
    </div>
    <div class="tips">
        <dl>
            <dt>我的课程表</dt>
            <dd><h4>继续学习 程序语言设计</h4><p>计算机原理基础</p></dd>
            <dd><h4>继续学习 IOS开发基础</h4><p>Swift流程控制</p></dd>
            <dd><h4>继续学习 Kotlin</h4><p>集合封装</p></dd>
        </dl>
        <a>全部课程</a>
    </div>

    <div class="point">
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<div class="recommand  container clearfix">
    <ul>
        <li><a href="">Android</a> </li>
        <li><a href="">IOS</a></li>
        <li><a href="">HTML</a></li>
        <li><a href="">CSS</a></li>
        <li><a href="">PHP</a></li>
        <li><a href="">MySQL</a></li>
        <li><a href="">JavaWeb</a></li>
    </ul>
</div>

<div class="course container">
    <div class="tab clearfix">
        <span class="vip-course">精品推荐</span>
        <a class="all-course" href="#">所有课程</a>
    </div>

    <div class="course-list clearfix">
        <ul>
            <li>
                <img src="images/icon1.png"/>
                <div class="course-info">
                    <h5>ThinkPhp5.0博客系统实战</h5>
                    <p>最牛加油</p>
                    <span class="category">高级</span>
                    <span class="count">12020人在学</span>
                </div>
            </li>
            <li>
                <img src="images/icon1.png"/>
                <div class="course-info">
                    <h5>ThinkPhp5.0博客系统实战</h5>
                    <p>最牛加油</p>
                    <span class="category">高级</span>
                    <span class="count">12020人在学</span>

                </div>
            </li>
            <li>
                <img src="images/icon1.png"/>
                <div class="course-info">
                    <h5>ThinkPhp5.0博客系统实战</h5>
                    <p>最牛加油</p>
                    <span class="category">高级</span>
                    <span class="count">12020人在学</span>

                </div>
            </li>
            <li>
                <img src="images/icon1.png"/>
                <div class="course-info">
                    <h5>ThinkPhp5.0博客系统实战</h5>
                    <p>最牛加油</p>
                    <span class="category">高级</span>
                    <span class="count">12020人在学</span>

                </div>
            </li>
            <li>
                <img src="images/icon1.png"/>
                <div class="course-info">
                    <h5>ThinkPhp5.0博客系统实战</h5>
                    <p>最牛加油</p>
                    <span class="category">高级</span>
                    <span class="count">12020人在学</span>

                </div>
            </li>
            <li>
                <img src="images/icon1.png"/>
                <div class="course-info">
                    <h5>ThinkPhp5.0博客系统实战</h5>
                    <p>最牛加油</p>
                    <span class="category">高级</span>
                    <span class="count">12020人在学</span>

                </div>
            </li>
            <li>
                <img src="images/icon1.png"/>
                <div class="course-info">
                    <h5>ThinkPhp5.0博客系统实战</h5>
                    <p>最牛加油</p>
                    <span class="category">高级</span>
                    <span class="count">12020人在学</span>

                </div>
            </li>
            <li>
                <img src="images/icon1.png"/>
                <div class="course-info">
                    <h5>ThinkPhp5.0博客系统实战</h5>
                    <p>最牛加油</p>
                    <span class="category">高级</span>
                    <span class="count">12020人在学</span>

                </div>
            </li>
        </ul>
    </div>
</div>
<div id="footer">
    <div class="container clearfix">
        <div class="left">
            <img src="images/logo-s.png"/>
            <p>中国领先的在线教育平台,致力于提升中国程序员技术实力</p>
            <div class="download">下载App
                <img class="erweima" src="images/erweima.png"/></div>
        </div>
        <div class="right">
            <dl>
                <dt>关于我们</dt>
                <dd>公司介绍</dd>
                <dd>合作联系</dd>
                <dd>最新动态</dd>
            </dl>
            <dl>
                <dt>关于我们</dt>
                <dd>公司介绍</dd>
                <dd>合作联系</dd>
                <dd>最新动态</dd>
            </dl>
            <dl>
                <dt>关于我们</dt>
                <dd>公司介绍</dd>
                <dd>合作联系</dd>
                <dd>最新动态</dd>
            </dl>
        </div>
    </div>
</div>
</body>
</html>
